/**
 * WidgetEventDownloadInput module
 */

 import React,{Component} from "react";
 import { connect } from 'dva';
 import classnames from 'classnames';
 import { bindActionCreators } from 'redux';
 import widgetsActions from '../../../actions/Editor/widgets';
 import editorActions from '../../../actions/Editor/editor';
 import tool from "../../../utils/tool";
 import CommonProperty from "./CommonProperty";
 import Validator from "../../../utils/validator/Validator";
 
 class WidgetEventDownloadInput extends Component{
    mixins: [CommonProperty]
    constructor(props) {
        super(props);
        this.state = {             
            iphone_url: "",
            android_url: "",
            invalidIphoneUrl: false,
            invalidAndroidUrl: false
        };
    }
    componentWillMount(){
        const {widget} = this.props;
        this.setState({
            iphone_url: widget.action.iphone_url,
            android_url: widget.action.android_url
        });
        this.url = "";
    }
    checkValidate(url){
        let validator = Validator();

        validator.addRule(url, [{
            validator: "url"
        }]);

        let errors = validator.execute();
        return !errors;
    }
    handleOnUrlChanged(type, e){
        let input = $(e.target), val = input.val();

        this.url = val;

        let param = {};
        param[type] = this.url;

        this.setState(param);
    }
    handleOnInputBlur(type, e){
        if (this.checkValidate(this.url)){
            if (this.url){
                this.url = tool.completionUrl(this.url);
            }
            const {widget,updateWidget,setState} = this.props;
            const {action} = widget || {};
            action[type] = this.url;

            setState({selectedWidget: widget});
            updateWidget(widget);
            
        } else {
            var param = {};
            if (type === "iphone_url"){
                param.invalidIphoneUrl = true;
            } else if(type === "android_url") {
                param.invalidAndroidUrl = true;
            }
            this.setState(param);
        }
    }
    render(){
        let iphoneErrorNode = "";
        if (this.state.invalidIphoneUrl){
            iphoneErrorNode = <div className="alerterror">{$._("Please enter a valid Website")}</div>
        }

        var androidErrorNode = "";
        if (this.state.invalidAndroidUrl){
            androidErrorNode = <div className="alerterror">{$._("Please enter a valid Website")}</div>
        }

        return (
            <div>
                <div className="rowli">
                    <label className="title">IOS:</label>
                    <input value={this.state.iphone_url}
                        onChange={(e) => this.handleOnUrlChanged("iphone_url",e)}
                        onBlur={(e) => this.handleOnInputBlur("iphone_url",e)}
                        name="iphone_url"
                        ref="iphone_url"
                        type="text"
                        autoFocus=""
                        className="form-control"
                        placeholder="https://itunes.apple.com/us/app/-/id123456789" />
                </div>
                {iphoneErrorNode}
                <div className="rowli">
                    <label className="title">Android:</label>
                    <input value={this.state.android_url}
                        onChange={(e) => this.handleOnUrlChanged("android_url",e)}
                        onBlur={(e) => this.handleOnInputBlur("android_url",e)}
                        name="android_url"
                        type="text"
                        className="form-control"
                        ref="android_url"
                        placeholder="https://play.google.com/store/apps/details?id=my.app.id" />
                </div>
                {androidErrorNode}
            </div>
        )
    }
 }
 
 const mapStateToProps = ({ editor, widgets ,pages}) => {
    const pageId = editor.selectedPageId;
    return {
      widget: editor.selectedWidget,
      widgets: widgets.filter(w => w.page_id === pageId),
    };
};

 const mapDispatchToProps = (dispatch) => {
     return bindActionCreators({...widgetsActions,...editorActions}, dispatch);
 };


 export default connect(mapStateToProps, mapDispatchToProps)(WidgetEventDownloadInput);

